<template>
  <div class="top">
    <div class="title">Find USPS Locations</div>
    <div class="text">Search for nearby Post Office™ locations, Collection Boxes, or specfic services.</div>
    <div class="box">
      <div class="one">
        <div class="left">
          <div class="left-one">
            <div class="left"style="float: left;">*Find a Location</div>
            <a href="#" style="float: right;">Use Current Location<iconLocationOne></iconLocationOne></a>
          </div>
          <el-input placeholder="City and State, or ZIP Code™"></el-input>
        </div>
        <div class="left">
          <div class="left-one">
            <div class="left"style="float: left;">*Location Type(s)</div>
          </div>
          <el-input placeholder="City and State, or ZIP Code™"></el-input>
        </div>
        <el-button>Search</el-button>
      </div>
      <div class="two">
        <el-button class="left">
          <iconFilter></iconFilter>
          Filter
        </el-button>
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="Sunday Hours" value="Value A" />
            <el-checkbox label="Pickup Hold Mail" value="Value B" />
            <el-checkbox label="Passport Appointments" value="Value C" />
        </el-checkbox-group>
      </div>
    </div>
  </div>
  <div class="title">Streamline Your Visit to the Post Office</div>
  <div class="big-box">
    <div class="box">
      <div class="img"><iconPackages class="icon"></iconPackages></div>
      <div class="title">Prepare Your Mail & Packages</div>
      <div class="text">If you're sending packages or letters, have them properly packaged and addressed before going to the Post Office. Click below for a helpful step-by-step guide.</div>
      <a href="#">How to Send a Letter</a>
      <a href="#">How to Send a Package</a>
    </div>
    <div class="box" style="background-color: #f7f7f7;">
      <div class="img"><iconForms class="icon"></iconForms></div>
      <div class="title">Complete Forms in Advance</div>
      <div class="text">Complete Forms in Advance
        If you're applying for a passport or filling out any other forms, complete them beforehand. Make sure you have all the necessary supporting documents ready.</div>
      <a href="#">Forms for Passport Applicatio</a>
      <a href="#">Filling Out Customs Forms</a>
    </div>
    <div class="box">
      <div class="img"><iconSchedule class="icon"></iconSchedule></div>
      <div class="title">Schedule Passport Appointments</div>
      <div class="text">Check if your local Post Office offers passport appointment scheduling. If appointments are available, you can reserve a time slot and avoid long wait times.</div>
      <a href="#">Schedule a Passport Appointment</a>
    </div>
  </div>
  <div class="box1">
    <div class="left"><img src="../../assets/image/self-service-kiosk.jpg"></div>
    <div class="right">
      <div class="one">
        <div class="img"><iconLocation class="icon" :color="currentColor"></iconLocation></div>
        <div class="text">What can I do at a USPS location that I can't do online?</div>
      </div>
      <div class="two">
        <div class="box2" style="background-color: #ffffff00;">
          <div class="title">Verify Your Identity In-Person</div>
          <div class="text">Some USPS® services require identity verification. If you can't verify your identity online (or prefer not to), follow your instructions and bring acceptable ID and any required documents or barcodes.</div>
        </div>
        <div class="box2">
          <div class="title">Complete Customs Forms &
            Specialized USPS Services</div>
          <div class="text">You may need to visit a Post Office to complete certain customs forms or for specialized USPS services, such as bulk mailings or services for businesses.</div>
        </div>
        <div class="box2">
          <div class="title">Weigh & Pay for Packages</div>
          <div class="text">If you don't have a scale (or printer), you can weigh your packages and pay for postage at a self-service kiosk or at the counter. (And you can pay cash, too.)</div>
        </div>
        <div class="box2"style="background-color: #ffffff00;">
          <div class="title">Get Expert Help, One-on-One</div>
          <div class="text">Sometimes, it just helps to speak to a local expert about your specific mail sending or receiving situation. Talk to a trained retail associate at the counter.</div>
        </div>
      </div>
    </div>
  </div>
  <div class="cards">
    <div class="card" v-for="(item,index) in cardList">
      <div class="one" @click="show(index)">
        <div class="left">{{item.title}}</div>
        <div class="right"></div>
      </div>
      <div class="two"  v-show="item.a">{{item.text}}</div>
    </div>
  </div>
  <div class="one1">
    <div class="title1">USPS Online Services</div>
    <div class="green">
      <svg width="1em" height="1em">
        <circle cy=".5em" cx=".5em" r=".5em" fill="#218748"></circle>
      </svg>&emsp;Always Open
    </div>
    <div class="text">USPS offers many online services to help you get your shipping and mailing needs covered from the comfort of your home or business.</div>
    <div class="boxs">
      <a href="#"><div class="tu"><iconClick class="icon"></iconClick></div>Click-N-Ship®</a>
      <a href="#"><div class="tu"><iconStamps class="icon"></iconStamps></div>Buy Stamps</a>
      <a href="#"><div class="tu"><img src="../../assets/icon/holdmail.svg"></div>Hold Mail</a>
      <a href="#"><div class="tu"><img src="../../assets/icon/change-address.svg"></div>Change My Address</a>
      <a href="#"><div class="tu"><img src="../../assets/icon/calculate-price.svg"></div>Calculate a Price</a>
      <a href="#"><div class="tu"><img src="../../assets/icon/schedule-pickup.svg"></div>Schedule a Pickup</a>
    </div>
  </div>
  <div class="buttom">
    <div class="title">Can't find what you're looking for?</div>
    <div class="text">Visit FAQs for answers to common questions about USPS locations and services.</div>
    <el-button>FAQs</el-button>
  </div>
</template>
<script setup>
import iconLocationOne from '../../assets/icon/locationOne.vue'
import iconFilter from '../../assets/icon/filter-icon.vue'
import iconPackages from '../../assets/icon/packages.vue'
import iconForms from '../../assets/icon/forms.vue'
import iconSchedule from '../../assets/icon/schedule.vue'
import iconLocation from '../../assets/icon/location.vue'
import iconClick from '../../assets/icon/click-n-ship.vue'
import iconStamps from '../../assets/icon/stamps&supplies.vue'
// import iconMail from '../../assets/icon/schedue-one.vue'
import { ref } from 'vue'

const show=(index)=>{
  cardList.value[index].a=!cardList.value[index].a
  console.log(cardList.value[index].a)
}
const cardList=ref([
  {
    a:false,
    title:'Post Office',
    text:'A Post Office is staffed by a USPS® Service employee and has window service hours. Many Post Offices have open, after-hour lobbies with self-service kiosks and PO Box™ access.'
  },
  {
    a:false,
    title:'Collection Boxes',
    text:'Most collection boxes are freestanding mailboxes such as the familiar USPS Blue Box, special white mailboxes for prepaid Priority Mail Express® items, lobby drop-off slots, or office building mail chutes. Pickup times are posted on the box label.'
  },
  {
    a:false,
    title:'National Retailer',
    text:'A National Retailer is an Approved Postal Provider® that provides shipping and mailing services as well as sells stamps.'
  },
  {
    a:false,
    title:'gopost®',
    text:'gopost units are automated, secured, self-service parcel lockers placed in convenient locations where you can pick up or ship packages. Find a gopost location near you.'
  },
  {
    a:false,
    title:'Contract Postal Unit',
    text:'Contract Postal Units (CPUs) are located within existing businesses. While not freestanding Post Office locations, CPUs provide a full range of USPS retail products and services at regular USPS prices.'
  },
  {
    a:false,
    title:'Service Kiosk',
    text:'A few kiosks are in large shopping malls. Most kiosks are in Post Office lobbies and offer many of the services available at the full-service Post Office counter. You can buy stamps, weigh packages, and print Priority Mail® and Priority Mail Express shipping labels at kiosks. Bring packing tape and you can ship your items in our free boxes.'
  },
  {
    a:false,
    title:'Village Post Office',
    text:'A Village Post Office™ (VPO) sells a limited selection of Postal products and services. Village Post Offices are not stand-alone buildings but areas within existing businesses such as a store or library.'
  },
])
const currentColor=ref('#333366')
const checkList = ref([])
</script>
<style scoped>
img{
  width: 100%;
  height: 100%;
}
.icon{
  width: 100%;
  height: 100%;
}
.top{
  width: 100%;
  height: 250px;
  background-color: #333366;
  /* margin-bottom: 500px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  .title{
    font-size: 31px;
    color: #ffffff;
    margin-top: 39px;
  }
  .text{
    color: #ffffff;
    margin-top: 20px;
  }
  .box{
    width: 80%;
    height: 193px;
    margin-top: 145px;
    position: absolute;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.767);
    .one{
      width: 100%;
      height: 126px;
      /* background-color: yellowgreen; */
      border-bottom: 1.5px solid #e7e7e7;
      display: flex;
      flex-direction: row;
      .left{
        width: 40%;
        height: 100%;
        /* background-color: yellowgreen; */
        overflow: hidden;
        .left-one{
        padding-left: 16px;
        padding-right: 16px;
        font-size: 13px;
        font-weight: 100;
        margin-top: 27px;
        a{
          color: #216094;
        }
        
        }
        .el-input{
          width: 92%;
          margin-left: 16px;
          /* padding-left: 16px;
          padding-right: 16px; */
          margin-top: 5px;
          height: 45px;
          /* border-radius: 6px; */
        }
        :deep(.el-input__wrapper){
          /* background-color: #216094; */
          border: 1px solid rgb(0, 0, 0);
        }
      }
      .el-button{
        width: 150px;
        background-color: #333366;
        color:#ffffff;
        height: 45px;
        font-size: 17px;
        margin: 50px 0 0 30px;
        border: 1px solid black;
      }
      .el-button:hover{
        background-color: #e7e7e7;
        color: #333366;
      }
    }
    .two{
      width: 100%;
      height: 67px;
      /* background-color: yellowgreen; */
      display: flex;
      flex-direction: row;
      align-items: center;
      .left{
        width: 100px;
        height: 35px;
        background-color: #ffffff;
        border-radius: 40px;
        margin-left: 18px;
        border: 1px solid #333366;
        color: #333366;
        font-size: 16px;

      }
      .left:focus{
        box-shadow: 0px 0px 7px rgba(240, 0, 0, 0.767);
      }
      .el-checkbox-group{
        margin-left: 20%;
      }
    }
  }
}
.title{
  text-align: center;
  font-size: 30px;
  color: #333366;
  margin-top: 137px;
}
.big-box{
  width: 1140px;
  /* height: 400px; */
  overflow-wrap: break-word;
  /* background-color: #216094; */
  margin: 20px auto 0;       
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  grid-auto-rows: minmax(100px, auto); /* 每行最小高度为 100px，根据内容自适应 */
  margin-bottom: 30px;
  .box{
    overflow-wrap: break-word;
    /* background-color: yellowgreen; */
    padding: 25px;
    display: flex;
    flex-direction: column;
    .img{
      width: 70px;
      height: 70px;
      /* background-color: #e7e7e7; */
    }
    .title{
      /* background-color: yellow; */
      margin-top: 0;
      font-size: 20px;
      text-align: left;
      margin-top: 1px;
      color: #333366;
    }
    .text{
      overflow-wrap: break-word;
      margin-top: 15px;
      /* background-color: #216094; */
      font-size: 15px;
    }
    a{
      margin-top: 6px;
      color: #216094;
    }
  }
}
.box1{
  width: 100%;
  /* height: 480px; */
  overflow-wrap: break-word;
  margin-top: 60px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  /* background-color: #216094; */
  .left{
    float: left;
    height: 480px;
    width: 40%;
    /* background-color: yellowgreen; */
  }
  .right{
    width: 56%;
    /* height: 300px; */
    overflow-wrap: break-word;
    /* background-color: yellowgreen; */
    margin-left: 30px;
    .one{
      width: 100%;
      overflow-wrap: break-word;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      .img{
        width: 80px;
        height: 80px;
        /* float: left; */
        /* background-color: #803b3b; */
      }
      .text{
        color: #333366;
        font-size: 29px;
        /* float: left; */
        width: 88%;
        overflow-wrap: break-word;
        /* background-color: yellow; */
      }
    }
    .two{
      width: 676px;
      /* background-color: yellow; */
      overflow-wrap: break-word;
      margin-top: 30px;
      display: grid;
      grid-template-columns: repeat(2,1fr);
      grid-auto-rows: minmax(100px,auto);
      .box2{
        width: 298px;
        background-color: #e7e7e7;
        margin-right: 1px;
        margin-top: 1px;
        padding: 20px;
        .title{
          margin-top: 0px;
          font-size: 19px;
          text-align: left;
        }
        .text{
          font-size: 14.5px;
          margin-top: 20px;
        }
      }
    }
  }
}
.cards{
  width: 1170px;
  /* height: 50px; */
  overflow-wrap: break-word;
  /* background-color: #216094; */
  margin: 0 auto 10px;
  /* display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px; */
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  .card{
    height: 100%;
    /* height: ; */
    width: 338px;
    /* float: left; */
    /* width: 100%; */
    background-color: #f7f7f7;
    margin: 10px;
    border-radius: 10px;
    .one{
      /* display: flex;
      flex-direction: row; */
      width: 100%;
      height: 50px;
      border-radius: 10px;
      cursor: pointer;
      /* overflow-wrap: break-word; */
      /* display: flex; */
      /* align-items: center; */
      /* background-color: rgb(255, 255, 255); */
      .left{
        /* height: ; */

        /* background-color: turquoise; */
        overflow-wrap: break-word;
        margin-top:11px;
        margin-left: 20px;
        color: #333366;
        font-size: 20px;
        float: left;
      }
      .right{
        float: right;
        width: 32px;
        height: 32px;
        margin: 9px 20px 0 0;
        /* background-color: yellow; */
        background-image: url('../../assets/icon/expand-icon.svg');
      }
    }
    .one:hover{
      background-color: #e4e4e4;
    }
    .two{
      overflow-wrap: break-word;
      /* background-color: #2e9421; */
      font-size: 14px;
      margin-left: 20px;
      margin-right: 10px;
      padding-bottom: 20px;
    }
  }
}
.one1{
  width: 100%;
  /* height: 300px; */
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 40px;
  background-color: #f7f7f7;
  /* justify-content: center; */
  /* justify-items: center; */
  .title1{
    overflow-wrap: break-word;
    font-size: 27px;
    color: #333366;
    /* background-color: yellowgreen; */
    margin-top: 40px;
  }
  .green{
    overflow-wrap: break-word;
    /* background-color: violet; */
    margin-top: 8px;
    /* margin-left: 10px; */
    font-weight: 600;
    color: #218748;
  }
  .text{
    width: 530px;
    overflow-wrap: break-word;
    /* background-color: yellow; */
    margin-top: 8px;
  }
  .boxs{
    width: 500px;
    overflow-wrap: break-word;
    /* background-color: #219421; */
    /* padding-bottom: 650px; */
    margin-bottom: 50px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    a{
      width: 240px;
      /* height: 26px; */
      overflow-wrap: break-word;
      display: flex;
      flex-direction: row;
      /* background-color: yellowgreen; */
      color: #216094;
      margin: 20px 1px 1px 1px;
      .tu{
        width: 26px;
        height: 26px;
        margin-right: 7px;
        margin-left: 20px;
      }
    }
  }
}
.buttom{
  display: flex;
  flex-direction: column;
  align-items: center;
  .title{
    /* margin: 0; */
    margin-top: 60px;
    font-size: 23px;
  }
  .text{
    margin-top: 20px;
    width: 380px;
    /* font-weight: 500; */
    text-align: center;
  }
  .el-button{
    background-color: #333366;
    color: #ffffff;
    font-size: 16px;
    width: 160px;
    height: 45px;
    margin-top: 30px;
    margin-bottom: 60px;
  }
}
</style>